<template>
	<div>
		
		<div class="mui-numbox d-flex ai-center jc-around" data-numbox-min='1'>
			<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
			<!-- 用change事件监听文本框的改变 -->
			<input data-numbox-min="1" id="test" class="mui-input-numbox" type="number" :value="initcount" @change="countChanged" ref="numbox" readonly />
			<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
		</div>
	</div>
</template>

<script>
	import mui from '../../plugins/mui.min.js'
	export default {

		//初始化 我们的 加减框
		mounted(){
			mui('.mui-numbox').numbox();
			
		},
		methods: {
			async  countChanged(){
				let num = this.$refs.numbox.value - this.initcount;
				const res = await this.$http(`cart/addCart.do?skuId=${this.goodsid}&num=${num}`)
				if (res.status ==200) {
					this.$emit('getGoodsList')
					
				}
				//数量改变  把最新的数量保存到store中  覆盖之前的值
				// this.$store.commit("updateGoodsInfo",{id: this.goodsid, count: this.$refs.numbox.value})
			}
		},
		props: ["initcount","goodsid"]
		
		
	}
</script>

<style scoped lang="scss">
	.mui-numbox button{
		// width: 1rem;
		
		height: 1.4rem;
		line-height: 1.4rem;
		background-color: #fff;
		text-align: center;
		border: 1px solid #dbdde0;
		font-size: 16px;
	}
	.mui-btn-numbox-minus {
		font-weight: bold;
	}
	.mui-numbox input {
		border: none;
		width: 60px;
		text-align: center;
		font-weight: bold;
	}
</style>